// components/objects/TrialComponentStyles.js
import { styled } from '@mui/material/styles';
import { TableCell, Box, Paper } from '@mui/material';

// Styled components
export const StyledTableCell = styled(TableCell)(({ theme }) => ({
  fontWeight: 'bold',
}));

export const LogViewerBox = styled(Box)(({ theme }) => ({
  maxHeight: "200px", 
  overflow: "auto", 
  fontFamily: "monospace",
  fontSize: "0.8rem",
  padding: theme.spacing(1)
}));

export const ExpandedInfoBox = styled(Box)(({ theme }) => ({
  padding: theme.spacing(2),
}));

// Style objects for MUI sx props
export const styles = {
  alertContainer: {
    marginBottom: 3
  },
  mainContainer: {
    padding: 2
  },
  pageTitle: {
    fontWeight: 'bold', 
    marginBottom: 3
  },
  subscriptionInfoPaper: { 
    marginBottom: 3, 
    padding: 2,
  },
  subscriptionHeader: {
    display: 'flex', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    marginBottom: 2
  },
  subscriptionTitle: {
    fontWeight: 'medium'
  },
  chipContainer: {
    marginTop: 2
  },
  tabsContainer: {
    marginBottom: 3
  },
  tabsHeader: {
    borderRadius: '4px 4px 0 0' 
  },
  tabsBody: {
    borderRadius: '0 0 4px 4px'
  },
  emailContainer: {
    display: 'flex', 
    alignItems: 'center'
  },
  addressSecondary: {
  },
  systemLogsContainer: {
    marginTop: 4
  },
  logsContent: { 
    padding: 1,
  },
  upgradeButtonContainer: {
    display: 'flex', 
    justifyContent: 'center', 
    marginTop: 4
  },
  errorDisplay: {
    marginTop: 4, 
    padding: 3, 
    borderRadius: 1
  }
};

export default {
  StyledTableCell,
  LogViewerBox,
  ExpandedInfoBox,
  styles
};